<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>其他</title>
    <script type="text/javascript" src="../assets/vue-2.2.2.js"></script>
    <style>
        .title {
            background: green;
            font-size: 20px;
            width: 80%;
            border-radius: 5px;
            margin: 3px;
        }

        .red{
            color:red;
        }

        .blue{
            color:blue;
        }

        .font30{
            font-size: 30px;
        }
    </style>
</head>

<body>
    <!-------------------------------------------------------------------------------->
    <h4 class="title">1.$nextTick</h4>
    <span>
        说明：vue在观察到数据变化时，不是直接更新dom，而是开启一个队列（异步更新队列），并缓冲在同一事件循环中发生所有数据改变，
        在缓冲时会直接去除重复数据，从而避免不必要的计算和dom操作。然后在下一个tick中，vue刷新队列并执行实际（已经去重）工作。
    </span>
    <div id="app1">
        <div id="div" v-if="showDiv">这是一段文本</div>
        <button @click="getText">获取div的内容</button>
    </div>
    <script>
        new Vue({
            el: '#app1',
            data: {
                showDiv:false
            },
            methods:{
                getText:function(){
                    this.showDiv = true;
                    this.$nextTick(function(){//保证了dom的更新后再操作，防止未渲染，vue
                        var text = document.getElementById("div").innerHTML;
                        console.log(text);
                    });
                }
            }
        })
    </script>
    <hr>
    <!-------------------------------------------------------------------------------->
    <h4 class="title">2.X-Templates</h4>
    <script type="text/x-templste" id="my-component">
        <div>这是一个模板</div>    
        </script>
    <hr>


    <!-------------------------------------------------------------------------------->
    <h4 class="title">3.通过Vue.extend()和$mount手动挂载vue实例</h4>
    <span>vue实例在实例化时候如果没有收到el选项，那么就还是处于”为挂载“状态，可以使用$mount手动挂载</span>
    <div id="mount-div"></div>
    <script>
        var MyComponent = Vue.extend({
            template:"<div>hello :{{name}}</div>",
            data:function(){
                return {
                    name:'wuzhazha'
                }
            }
        });
        //new MyComponent().$mount("#mount-div");
        new MyComponent({
            el:'#mount-div'
        });
    </script>

</body>

</html>